<template>
  <section>
    <mt-header title="我的课程"></mt-header>
    <div class="content-container">
      <div class="sub-tab-content">
        <div
          v-for="(item, index) in subTabData"
          @click="tabSub(index, item.idStr)"
          :key="JSON.stringify(index)"
          :class="{'sub-tab': subIndex === index}">
          <span>{{ item.name }}</span>
        </div>
      </div>
      <mt-loadmore 
          :autoFill="false"
          :top-method="loadTop"
          :bottom-all-loaded="allLoaded" 
          :bottomPullText="'加载更多'"
          :bottomDropText="'释放加载'"
          style="min-height: 300px"
          ref="loadmore">
        <div class="main-content">
          <div class="side-nav">
            <ul>
              <li :class="{'sub-tab': secondIndex === index}" v-for="(item, index) in secondLevel" :key="item.idStr" @click="getSecondList(index, item.idStr)">{{ item.name }}</li>
            </ul>
          </div>
          <div class="main-list">
              <Course v-for="(item, index) in list" :key="JSON.stringify(index)" :articleInfo="item"></Course>
          </div>
        </div>
      </mt-loadmore>
    </div>
  </section>
</template>

<script>
  import Course from '@components/Course/Course'
  import { Indicator } from 'mint-ui'
  import { getVideoList, getVideoCategory, getVideoAllCategory } from '@/api'

  export default {
    name: 'index',
    components: { Course },
    data () {
      return {
        // mainTabData: [{id: 1, text: '全部课程'}, {id: 2, text: '学习记录'}],
        // mainIndex: 0,
        subTabData: [],
        secondLevel: [],
        secondIndex: '',
        subIndex: 0,
        allLoaded: false,
        list: []
      }
    },
    mounted () {
      this.getList()
      this.getVideoCategory()
    },
    methods: {
      getVideoCategory () {
        getVideoAllCategory({}).then(res => {
          this.subTabData = res.data
          this.subTabData.unshift({name: "全部课程", idStr: ''})
          res.data.forEach(v => {
              v.childrens && (this.secondLevel = this.secondLevel.concat(v.childrens))
            })
          })
      },
      getList (id = '', level) {
        let param = !level ? { videoCategoryId: id } : { secondCategoryId: id }
        getVideoList(param).then(res => {
          this.list = res.data
          this.$refs.loadmore.onTopLoaded();
        })
      },
      getSecondList (index, id) {
        this.secondIndex = index
        this.getList(id, 1)
      },
      loadTop () {
        this.subIndex = 0
        this.secondIndex = '';
        this.secondLevel = []
        this.subTabData.forEach(v =>{v.childrens && (this.secondLevel = this.secondLevel.concat(v.childrens))})
        this.getList()
      },
      // loadBottom () {
      //   Indicator.open({
      //     text: '加载中...',
      //     spinnerType: 'fading-circle'
      //   });
      //   setTimeout(() => {
      //     this.list.push(1)
      //     Indicator.close();
      //     this.$refs.loadmore.onBottomLoaded();
      //   },1000)
      // },
      tabMain (index) {
        this.mainIndex = index
      },
      tabSub (index, id) {
        this.subIndex = index
        this.getList(id)
        this.secondLevel = []
        this.secondIndex = ''
        if (index) {
          this.secondLevel = this.subTabData.filter(v => v.idStr === id)[0].childrens
        } else {
          this.subTabData.forEach(v =>{v.childrens && (this.secondLevel = this.secondLevel.concat(v.childrens))})
        }
      }
    }
  }

</script>

<style lang="scss" scoped>
  @mixin tab-box{
    width: 100%;
    box-sizing: border-box;
    height: 0.76rem;
    line-height: 0.76rem;
    background: #fff;
    border-bottom: 1px solid #eee;
  }
  .content-container{
    margin-top: 0px;
  }
  .tab-content{
    @include tab-box;
    padding: 0 0.2rem;
  }
  .tab-container{
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: 0 1.8rem;
    font-size: 0.28rem;
    color: #666;
    div{
      flex-grow: 1;
    }
    div:first-child{
      text-align: left;
    }
    div:last-child{
      text-align: right;
    }
  }
  .main-tab{
    color: #333;
    span{
      display: inline-block;
      position: relative;
      &:before{
        content: '';
        display: inline-block;
        position: absolute;
        width: 20px;
        height: 2px;
        background: #333;
        bottom: 6px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
  .sub-tab-content{
    @include tab-box;
    overflow: hidden;
    overflow-x: scroll;
    white-space: nowrap;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-overflow-scrolling: touch;
    display: flex;
    font-size: 0.28rem;
    color: #999;
    div{
      text-align: center;
      display: inline-block;
      padding: 0 0.3rem;
    }
  }
  .sub-tab{
    color: #db8310;
  }
  .main-content{
    display: flex;
    height: 100%;
    .side-nav{
      width: 1.6rem;
      background: #F8F8F8;
      font-size: 14px;
      height: 100%;
      color: #6E6E6E;
      li{
        width: 100%;
        padding: 0.1rem 0.06rem;
        box-sizing: border-box;
        &:first-child{
          padding-top: 0.2rem; 
        }
      }
    }
    .main-list{
      flex: 1;
    }
  }
</style>


